/*清除浏览器默认样式*/
*{
	margin: 0;
	padding: 0;
}

html,body{
	width: 100%;
	height: 100%;
}

.container{
	width: 100%;
	height: 100%;

	background-color: #afeeee;

	overflow: hidden;
	position: relative;
}

.mountain1{
	width: 700px;
	height: 700px;
	background-color: #a9a9a9;

	border-radius: 50px;

	transform: rotateZ(45deg);
	position: absolute;

	top: 200px;
	left: 30%;
}

.mountain2{
	width: 60%;
	height: 250px;
	background-color: rgb(216,212,197);

	border-top-left-radius: 100%;

	position: absolute;

	right: 0;
	bottom: 0;
}

.mountain3{
	width: 1000px;
	height: 1000px;
	background-color: rgb(126,151,136);

	border-radius: 50px;
	transform: rotateZ(45deg);

	position: absolute;
	top: 300px;
	left: -100px;
}


.sun{
	width: 300px;
	height: 300px;

	background-color: gold;
	position: absolute;
	top: 0;
	right: 0;
	border-bottom-left-radius: 100%;
	box-shadow: 0 0 200px 10px orange;
}



.grass{
	width: 100%;
	height: 20px;
	position: absolute;
	bottom: 150px;

	background-image: repeating-linear-gradient(to right bottom,transparent,transparent 40%,green 40%,green);
	background-size: 20px 20px;
}

.road{
	width: 100%;
	height: 120px;
	position: absolute;
	bottom: 0;
	background-color: rgb(60,89,115);
	border-top: 15px solid #fff;
	border-bottom: 15px solid #fff;
}

.line{
	width: 100%;
	height: 10px;

	background-image: repeating-linear-gradient(to right,transparent,transparent 10%,#fff 10%,#fff 20%);
	position: absolute;
	top: calc(50% - 5px);
}

.car{
	width: 100%;
	height: 60px;
	background-size: 90px 40px;
	background-image: url(../res/che.png);
	background-repeat: no-repeat;
	position: relative;
	animation: carRun 10s linear infinite;
}


.car>img{
	width: 20px;
	position: absolute;
	bottom: 18px;

	animation-name: lunRoll;
	animation-duration: 30ms;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.car>img:first-of-type{
	left: 6px;
}
.car>img:last-of-type{
	left: 63px;
}

@keyframes lunRoll{
	form{
		transform: rotateZ(0deg);
	}

	to{
		transform: rotateZ(360deg);
	}
}


@keyframes carRun{
	from{
		transform: translate(0,0);
	}

	20%{
		transform: translate(20%,130%);
	}
	40%{
		transform: translate(40%,0);
	}
	60%{
		transform: translate(60%,130%);
	}
	80%{
		transform: translate(80%,0);
	}
	to{
		transform: translate(100%,130%);
	}
}




